<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{ height:100%; background-color:#F7F8FA; }
			.plan_type .title{ text-align: center; font-size: 13px; color: #306dfb; font-weight: 400; background-color: #e6effb; line-height: 18px; padding: 12px 0;}
			.plan_nums{ padding: 10px 15px;}
			.plan_nums div{ padding: 0 15px; background: linear-gradient(to right, #2671c2, #7db8eb); border-radius: 4px; overflow: hidden}
			.plan_nums ul{ position: relative; padding: 10px 0 25px; color:#fff; font-size: 14px;}
			.plan_nums ul:first-child::after{ position:absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #0048ad solid; transform: scaleY(0.5);}
			.plan_nums img{ width: 100%;}
			.plan_nums b{ display:block; font-size: 16px;}
			.plan_nums p{ position:relative; line-height: 25px;}
			.plan_nums p em{ position: absolute; right: 0; top: 0; font-size: 20px; font-weight:500; }
			.plan_list{ padding: 0 15px 22px;}
			.plan_list li{ box-shadow: 0 5px 20px rgba(0,0,0,0.08); margin-bottom: 8px; padding: 20px 15px; background-color: #fff; border-radius: 4px; position: relative; color: #333; overflow: hidden;}
			.plan_list h4{ display:block; font-size: 18px; }
			.plan_list p{ font-size: 12px; margin-top:6px; }
			.plan_list img{ width: 100%;}
			.plan_list em{ position:absolute; right: 15px; top: 37px; width: 17px; height: 17px; border-radius: 50%; background-image: url(../../image/img_24.png); background-size: 100% auto;}
			.plan_list em.on{ background-image:url(../../image/img_25.png);}
			.plan_list li div{ position:relative; margin-top: 10px; padding-top: 10px;}
			.plan_list li div::after{ position: absolute; content: ""; left: 0; top: 0; right: 0; border-top: 1px #dbdbdb solid; transform: scaleY(0.5);}
			.plan_list span{ display:block; font-size: 14px; margin-bottom: 3px; position: relative;}
			.plan_list span b{ position:absolute; right: 0; top: 0; font-size: 16px;}
			.slider01 {  height: 30px; }
			.slider02 {  height: 30px; }
			.slider03 {  height: 30px; }
			.slider04 {  height: 30px; }
			.s_fix{ position:fixed; left: 0; right: 0; bottom: 0; z-index: 9;}
			.display-none { display:none; }
		</style>
	</head>
	<body>
		<div class="plan_type">
			<div class="title">平台会根据您提交的险种计算联保费用</div>
			<div class="plan_nums">
				<div>
					<ul>
						<b>三者损失</b>
						<p>联保金额50万-500万，可自行选择</p>
					</ul>
					<ul>
						<p>选择联保金额<em id="threefee">100万</em></p>
						<p id="slider01" class="slider01"></p>
					</ul>
				</div>
			</div>
			<div class="plan_list">
				<ul>
					<li tapmode="lipress" onclick="selinsure(this,'clqzx');">
						<h4>车辆强制险</h4>
						<p>由系统结合车辆信息评估联保金额</p>
						<em></em>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'jdcss');">
						<h4>机动车损失</h4>
						<p>由系统结合车辆信息评估联保金额</p>
						<em></em>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'zrss');">
						<h4>自燃损失</h4>
						<p>由系统结合车辆信息评估联保金额</p>
						<em></em>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'dqss');">
						<h4>盗抢损失</h4>
						<p>由系统结合车辆信息评估联保金额</p>
						<em></em>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'jsyss');">
						<h4>驾驶员损失</h4>
						<p>联保金额1万-10万，可自行选择</p>
						<em id="jsyssop"></em>
						<div id="expanded02" class="display-none">
							<span>选择联保金额<b id="jsyfee">2万</b></span>
							<p id="slider02" class="slider02"></p>
						</div>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'ckss');">
						<h4>乘客保障</h4>
						<p>联保金额1万-10万，可自行选择</p>
						<em id="ckssop"></em>
						<div id="expanded03" class="display-none">
							<span>选择联保金额<b id="ckfee">2万</b></span>
							<p id="slider03" class="slider03"></p>
						</div>
					</li>
					<li tapmode="lipress" onclick="selinsure(this,'hwss');">
						<h4>货物损失</h4>
						<p>联保金额1万-10万，可自行选择</p>
						<em id="hwssop"></em>
						<div id="expanded04" class="display-none">
							<span>选择联保金额<b id="hwfee">2万</b></span>
							<p id="slider04" class="slider04"></p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--选择联保险种end-->
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/app.js"></script>
	<script type="text/javascript" src="../../script/md5.js"></script>
	<script type="text/javascript">
		var insureid;
		var sliderid2 = 0, sliderid3 = 0, sliderid4 = 0;
		var qzxxian = 0, jdcxian = 0, zrxian = 0, dqxian = 0, jsyxian = 0, ckxian = 0, hwxian = 0;
		var threefee = 100, jsyfee = 2, ckfee = 2, hwfee = 2;
		var uislider;
		var pageLoaded = 0;
		apiready = function() {
			api.parseTapmode();
			uislider = api.require('UISlider');
			insureid = api.pageParam.insureid;
			
			fnSlider('slider01',50,500,10,100);
			api.addEventListener({
                name: 'navitembtn'
            }, function(ret, err) {
                if (ret.type == 'left') {
					api.closeWin({
					});
                }
            });
			
			pageLoaded = 1;
		}
		function addinsure() {
			if(pageLoaded == 0) {
				return false;
			}
			jsyfee = jsyxian === 1 ? jsyfee : 0;
			ckfee = ckxian === 1 ? ckfee : 0;
			hwfee = hwxian === 1 ? hwfee : 0;
			api.showProgress({
				title: '请稍后...',
				text: '',
				modal: true
			});
			var paramsObj = {
				insureid: insureid,
				threefee: threefee,
				qzxxian: qzxxian,
				jdcxian: jdcxian,
				zrxian: zrxian,
				dqxian: dqxian,
				jsyxian: jsyxian,
				jsyfee: jsyfee,
				ckxian: ckxian,
				ckfee: ckfee,
				hwxian: hwxian,
				hwfee: hwfee,
				step: 2
			}
			api.getPrefs({
				key: 'user_info'
			}, function(ret, err) {
				if (ret && ret.value)
				{
					var userinfo = JSON.parse(ret.value);
					api.ajax({
						url: ApiUrl + '/v1/insure',
						method: 'post',
						cache: false,
						timeout: 10,
						headers: {
							authorization: kAppKey+';'+userinfo.access_token+';'+userinfo.uid
						},
						data: {
							values: paramsObj
						}
					}, function(ret, err) {
						api.hideProgress();
						if (ret) {
							api.sendEvent({
								name : 'refreshinsure'
							});
							openAlert();
						} else {
							console.log(JSON.stringify(err));
							toast(err.body.error);
						}
					});
				}
			});
		}
		function openAlert()
		{
			var icon = 'sucess.png';
			var title = '联保资料上传成功';
			var msg = '请等待系统审核';
			var winname = 'insure_win';
			var btntxt = '返回';
			var param = {
				icon: icon,
				title: title,
				msg: msg,
				btntxt: btntxt,
				winname: winname,
			};
			openNavWin('#ddd','noheadmsg_win','../public/noheadmsg_frm.html','办理联保',false,true,false,[],param);
		}
		function selinsure(obj, insuretype) {
			if(insuretype == 'clqzx') {
				$api.toggleCls(obj.lastElementChild,'on');
				qzxxian = $api.hasCls(obj.lastElementChild,'on') ? 1 : 0;
			}
			else if(insuretype == 'jdcss') {
				$api.toggleCls(obj.lastElementChild,'on');
				jdcxian = $api.hasCls(obj.lastElementChild,'on') ? 1 : 0;
			}
			else if(insuretype == 'zrss') {
				$api.toggleCls(obj.lastElementChild,'on');
				zrxian = $api.hasCls(obj.lastElementChild,'on') ? 1 : 0;
				
			}
			else if(insuretype == 'dqss') {
				$api.toggleCls(obj.lastElementChild,'on');
				dqxian = $api.hasCls(obj.lastElementChild,'on') ? 1 : 0;
				
			}
			else if(insuretype == 'jsyss') {
				$api.toggleCls($api.byId('jsyssop'),'on');
				jsyxian = $api.hasCls($api.byId('jsyssop'),'on') ? 1 : 0;
				
				$api.toggleCls($api.byId('expanded02'),'display-none');
				if(!$api.hasCls($api.byId('expanded02'),'display-none')) {
					fnSlider('slider02',1,10,0.5,jsyfee);
				}
				else
				{
					closeslider(2);
				}
			}
			else if(insuretype == 'ckss') {
				$api.toggleCls($api.byId('ckssop'),'on');
				ckxian = $api.hasCls($api.byId('ckssop'),'on') ? 1 : 0;
				$api.toggleCls($api.byId('expanded03'),'display-none');
				if(!$api.hasCls($api.byId('expanded03'),'display-none')) {
					fnSlider('slider03',1,10,0.5,ckfee);
				}
				else
				{
					closeslider(3);
				}
				
			}
			else if(insuretype == 'hwss') {
				$api.toggleCls($api.byId('hwssop'),'on');
				hwxian = $api.hasCls($api.byId('hwssop'),'on') ? 1 : 0;
				$api.toggleCls($api.byId('expanded04'),'display-none');
				if(!$api.hasCls($api.byId('expanded04'),'display-none')) {
					fnSlider('slider04',1,10,0.5,hwfee);
				}
				else
				{
					closeslider(4);
				}
			}
		}
		function toDecimal2NoZero(x) {
			var f = Math.round(x * 100) / 100;
			var s = f.toString();
			return s;
		}
		function fnSlider(domid,minval,maxval,addval,myval) {
			var divPos = $api.offset($api.byId(domid));
			var bubbleico = 'widget://image/bubbless.png';
			var pox = 0;
			var poy = 0;
			if (api.systemType == "android") {
				pox = -11;
				poy = 10;
			}
			var bgcolor =  domid == 'slider01' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(224, 224, 224, 0.5)';
			
			//var PosL = (api.frameWidth - 316) / 2; 
			uislider.open({
				animation: true,
				rect: {
					x: divPos.l + pox,
					y: divPos.t + 3 + poy,
					size: divPos.w
				},
				isCorner: true,
				radius: 16,
				bubble: {
					state: 'hide',  
				},
				handler: {
					w: 40,
					h: 40,
					bg: bubbleico
				},
				bar: {
					h: 6,
					bg: bgcolor,
					active: 'rgba(121, 221, 215, 1)'
				},
				value: {
					min: minval,
					max: maxval,
					step: addval,
					init: myval
				},
				fixedOn: api.frameName,
				fixed: false
			}, function(ret, err) {
				if (ret) {
					if(domid == "slider02") {
						sliderid2 = ret.id;
					}
					else if(domid == "slider03") {
						sliderid3 = ret.id;
					}
					else if(domid == "slider04") {
						sliderid4 = ret.id;
					}
					if(ret.eventType == 'end')
					{
						var curpval = toDecimal2NoZero(ret.value);
						if(domid == "slider01") {
							threefee = curpval;
							$api.text($api.byId('threefee'),curpval+'万');
						}
						else if(domid == "slider02") {
							jsyfee = curpval;
							$api.text($api.byId('jsyfee'),curpval+'万');
						}
						else if(domid == "slider03") {
							ckfee = curpval;
							$api.text($api.byId('ckfee'),curpval+'万');
						}
						else if(domid == "slider04") {
							hwfee = curpval;
							$api.text($api.byId('hwfee'),curpval+'万');
						}
					}
					else if(ret.eventType == 'sliding')
					{
						var curpval = toDecimal2NoZero(ret.value);
						if(domid == "slider01") {
							$api.text($api.byId('threefee'),curpval+'万');
						}
						else if(domid == "slider02") {
							jsyfee = curpval;
							$api.text($api.byId('jsyfee'),curpval+'万');
						}
						else if(domid == "slider03") {
							ckfee = curpval;
							$api.text($api.byId('ckfee'),curpval+'万');
						}
						else if(domid == "slider04") {
							hwfee = curpval;
							$api.text($api.byId('hwfee'),curpval+'万');
						}
						
					}
					else if(ret.eventType == 'click')
					{
						var curpval = toDecimal2NoZero(ret.value);
						if(domid == "slider01") {
							$api.text($api.byId('threefee'),curpval+'万');
						}
						else if(domid == "slider02") {
							jsyfee = curpval;
							$api.text($api.byId('jsyfee'),curpval+'万');
						}
						else if(domid == "slider03") {
							ckfee = curpval;
							$api.text($api.byId('ckfee'),curpval+'万');
						}
						else if(domid == "slider04") {
							hwfee = curpval;
							$api.text($api.byId('hwfee'),curpval+'万');
						}
					}
					//console.log(JSON.stringify(ret));
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}
		function closeslider(sid) {
			var sliderid;
			if(sid == 2) {
				sliderid = sliderid2;
			}
			else if(sid == 3) {
				sliderid = sliderid3;
			}
			else if(sid == 4) {
				sliderid = sliderid4;
			}
			uislider.close({
				id: sliderid
			});
		}
		
	</script>
</html>